<template>
  <div class="home-wrapper">
    <Header></Header>
    <Main></Main>
    <a-drawer
      class="drawer-cloumn"
      :width="drawerWidth"
      placement="left"
      :closable="false"
      :mask="false"
      :visible="drawerStatus"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
      <TrendChart :options="chartsData[0]" @click.native="openDialog"></TrendChart>
      <TrendChart :options="chartsData[1]" @click.native="openDialog"></TrendChart>
      <TrendChart :options="chartsData[2]" @click.native="openDialog"></TrendChart>
    </a-drawer>
    <a-drawer
      class="drawer-cloumn"
      :width="drawerWidth"
      placement="right"
      :closable="false"
      :mask="false"
      :visible="drawerStatus"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
      <TrendChart :options="chartsData[3]" @click.native="openDialog"></TrendChart>
      <TrendChart :options="chartsData[4]" @click.native="openDialog"></TrendChart>
      <TrendChart :options="chartsData[5]" @click.native="openDialog"></TrendChart>
    </a-drawer>

    <a-modal v-model="dialogStatus" title="" width="60%" :centered="true" :footer="null" :closable="false" @cancel="closeDialog">
      <ModalInfo :tableData="tableData" :videoSrc="videoSrc" @closeDialog="closeDialog"></ModalInfo>
    </a-modal>

  </div>
</template>

<script>
import Header from '@/layout/header/Header'
import Main from '@/layout/main/Main'
import TrendChart from '@/components/TrendChart'
import ModalInfo from '@/components/ModalInfo'

import testData from './data'
const tableData = [
  {
    id: '1',
    aaa: '烟气流速(mg/s)',
    bbb: '15.000',
    ccc: '13.850'
  },
  {
    id: '2',
    aaa: '烟气流速(mg/s)',
    bbb: '15.000',
    ccc: '13.850'
  },
  {
    id: '3',
    aaa: '烟气流速(mg/s)',
    bbb: '15.000',
    ccc: '13.850'
  }
]

export default {
  name: 'Home',
  data () {
    return {
      drawerStatus: false,
      drawerWidth: 500,
      dialogStatus: false,
      chartsData: testData,
      tableData: tableData,
      videoSrc: require('@/assets/img/movie.mp4')
    }
  },
  components: {
    Header,
    Main,
    TrendChart,
    ModalInfo
  },
  methods: {
    afterVisibleChange (val) {
    },
    onClose () {
      this.drawerStatus = false
    },
    openDialog () {
      this.dialogStatus = true
      this.tableData = tableData
      this.videoSrc = require('@/assets/img/movie.mp4')
    },
    closeDialog () {
      this.dialogStatus = false
      this.tableData = []
      this.videoSrc = ''
    }
  },
  mounted () {
    this.drawerWidth = window.innerWidth * 0.26
    this.drawerStatus = true
    window.addEventListener('resize', () => {
      this.drawerWidth = window.innerWidth * 0.26
    })
  }
}
</script>

<style lang="less" scoped>
.home-wrapper {
  width: 100%;
  height: 100%;
  background-color: #e3e3e3;
}
</style>
